<%@ page language="java" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="<%=path %>/js/jquery/easyui.css">
		<link rel="stylesheet" type="text/css" href="<%=path %>/js/jquery/icon.css">
		<link rel="stylesheet" type="text/css" href="<%=path %>/js/jquery/demo.css">
		<script type="text/javascript" src="<%=path %>/js/jquery/jquery-1.6.min.js"></script>
		<script type="text/javascript" src="<%=path %>/js/jquery/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#vechile_series').combobox({
				url:'<%=path %>/componentMaintain.do?action=listVechileSeries',
				valueField:'id',
				textField:'categoryName',
				onSelect:function(data) {
					$('#tt2').tree({
						url: '<%=path %>/categoryMaintain.do?action=listCategory&categoryId=' + data.id,
						onClick:function(node){},
						onContextMenu: function(e, node){
							e.preventDefault();
							
							$('#tt2').tree('select', node.target);
							var kind = node.attributes;
							if (kind == 0) {
								$('#mm').menu('show', {
									left: e.pageX,
									top: e.pageY
									}
								);
							} else if (kind == 1) {
								$('#mn').menu('show', {
									left: e.pageX,
									top: e.pageY
									}
								);
							} else if (kind == 2) {
								$('#mt').menu('show', {
									left: e.pageX,
									top: e.pageY
									}
								);
							}
						}
					});
				}
			});
		});
		
		function append(category_kind) {
			var node = $('#tt2').tree('getSelected');
			openNewWindow(node,category_kind);
		}
		
		function remove(){
			var node = $('#tt2').tree('getSelected');
			$.ajax({
				url:'<%=path %>/categoryMaintain.do?action=delete',
				data:{id:node.id},
				type:'post'
				}
			);
			$('#tt2').tree('remove', node.target);
		}
		
		function openNewWindow(node, category_kind) {
			$('#dd').show();
			$('#categoryName').val("");
			$('#categoryDesc').val("");
			$('#dd').dialog({
				buttons:[{
					text:'确认',
					iconCls:'icon-ok',
					handler:function(){
						var categoryName_value = $('#categoryName').val();
						var categoryDesc_value = $('#categoryDesc').val();
						if (categoryName_value == null || categoryName_value.trim().length == 0) {
							alert('请输入目录名称！');
							return;
						}
						
						if (categoryDesc_value == null || categoryDesc_value.trim().length == 0) {
							alert('请输入目录描述！');
							return;
						}
						
						$.ajax({
							url:'<%=path %>/categoryMaintain.do?action=add',
							data:{categoryId:node.id, categoryName:categoryName_value, categoryDesc:categoryDesc_value, categoryKind:category_kind},
							type:'post',
							success:function(result) {
								$('#tt2').tree('append',{
									parent: (node?node.target:null),
									data:[{
										id:result,
										text:$('#categoryName').val(),
										attributes:category_kind,
										checked:true
									}]
								});
								
								$('#dd').dialog('close');
							}
						});
						
					}
				},{
					text:'取消',
					handler:function(){
						$('#dd').dialog('close');
					}
				}],
				modal:true
			});
		}
		
		function edit() {
			$('#dd').show();
			var node = $('#tt2').tree('getSelected');
			$.ajax({
				url:'<%=path %>/categoryMaintain.do?action=query',
				data:{categoryId:node.id},
				type:'post',
				dataType:'json',
				success:function(data) {
					$('#categoryName').val(data.categoryName);
					$('#categoryDesc').val(data.categoryDesc);
				}
			});
			
			$('#dd').dialog({
				buttons:[{
					text:'确认',
					iconCls:'icon-ok',
					handler:function(){
						var categoryName_value = $('#categoryName').val();
						var categoryDesc_value = $('#categoryDesc').val();
						if (categoryName_value == null || categoryName_value.trim().length == 0) {
							alert('请输入目录名称！');
							return;
						}
						
						if (categoryDesc_value == null || categoryDesc_value.trim().length == 0) {
							alert('请输入目录描述！');
							return;
						}
						
						$.ajax({
							url:'<%=path %>/categoryMaintain.do?action=edit',
							data:{categoryId:node.id, categoryName:categoryName_value, categoryDesc:categoryDesc_value},
							type:'post'
						});
						
						$('#tt2').tree('reload');
						
						$('#dd').dialog('close');
					}
				},{
					text:'取消',
					handler:function(){
						$('#dd').dialog('close');
					}
				}],
				modal:true
			});
		}
		
	</script>
</head>
<body>
	<div>
		车辆系列：<select id="vechile_series" style="width:150">
			<option>----选择车辆系列----</option>
		</select>
	</div>

	<ul id="tt2"></ul>
	<div id="mm" class="easyui-menu" style="width:120px;">
		<div onclick="append(1)" iconCls="icon-add">新增车型</div>
		<div onclick="remove()" iconCls="icon-remove">删除该车辆系列</div>
		<div onclick="edit()" iconCls="icon-edit">编辑该车辆系列</div>
	</div>
	
	<div id="mn" class="easyui-menu" style="width:120px;">
		<div onclick="append(2)" iconCls="icon-add">新增总成</div>
		<div onclick="remove()" iconCls="icon-remove">删除该车型</div>
		<div onclick="edit()" iconCls="icon-edit">编辑该车型</div>
	</div>
	
	<div id="mt" class="easyui-menu" style="width:120px;">
		<div onclick="append(2)" iconCls="icon-add">新增总成</div>
		<div onclick="append()" iconCls="icon-add">新增配件</div>
		<div onclick="remove()" iconCls="icon-remove">删除该总成</div>
		<div onclick="edit()" iconCls="icon-edit">编辑该总成</div>
	</div>
	
	<div id="dd" style="padding:5px;width:400px;height:200px;display:none;">
		<input type="hidden" id="categoryId" name="categoryId"/>
		目录名称：<input type="text" id="categoryName" name="categoryName" maxlength="60"/><p>
		目录描述：<textarea id="categoryDesc" name="categoryDesc" rows="3" cols="30"></textarea>
	</div>
</body>
</html>